<!--
    new
    数据列表控件，只负责数据显示

    属于基础数据组件，只负责数据的显示和渲染
    需要输入fields和data

    需继承list

    初步目标是能够满足主表的基本用法


    通过命令格式@command来向外传递时间，格式为
    {
        code,
        type,
        data:{}
    }
    
-->
<template>
  <div class="x-table table-container">
    <div class="table-wrapper">
    <table ref="table" class="table">
      <TableHead></TableHead>
      <TableBody></TableBody>
      <TableFoot></TableFoot>
    </table>
    </div>
     <div class="table-tool-wrapper" v-show="data.length">
    <TableTool ref="tool" class="table"></TableTool>
     </div>
    <div class="table-loading"></div>
  </div>
</template>

<script>
//import $ from "@/common";
import TableBody from "./tableBody";
import TableFoot from "./tableFoot";
import TableHead from "./tableHead";
import TableTool from "./tableTool";
import moduleStore from "store/type/dataList";
export default {
  name: "dataTable",
  moduleStore: moduleStore(),
  subModuleStore: true,
  props: {
    option: {
      default: () => {
        return {
          enableCheck: true
        };
      }
    }
  },
  data() {
    return {
      trHeight: []
    };
  },
  computed: {},
  watch: {
    data() {
      this.$nextTick(() => {
        this.updateTr();
        this.updateTrHeight();
      });
    }
  },
  methods: {
    updateTr() {
      if (this.$refs.tool && this.$refs.table) {
        //缓存列表变量，以便渲染列表
        this.tableTr = this.$refs.table.querySelectorAll("tbody>tr");
        this.toolTr = this.$refs.tool.$el.querySelectorAll("tbody>tr");
      }
    },
    updateTrHeight() {
      for (let i = 0; i < this.data.length; i++) {
        let toolHeight = this.toolTr[i].offsetHeight;
        let rowHeight = this.tableTr[i].offsetHeight;
        let height = toolHeight > rowHeight ? toolHeight : rowHeight;
        if (height !== this.trHeight[i]) {
          this.$set(this.trHeight, i, height);
        }
      }
    }
  },
  mounted() {},
  updated() {},
  components: {
    TableBody,
    TableFoot,
    TableHead,
    TableTool
  }
};
</script>

<style lang="less">
.x-table {
  .table-container {
    width: 100%;
    display: flex;
    flex-direction: row;
  }

  .table-tool {
  }
  .table-wrapper {
    flex: 1;
    overflow-x: auto;
  }
  .table-tool-wrapper {
  }

  .cell-check {
    width: 20px;
    .ivu-checkbox-wrapper {
      margin-right: 0;
    }
  }
}
</style>
